import React, { Fragment } from 'react';
import { Form, Select } from 'antd';
import useDictionary from '@/hooks/useDictionary';
import LimitInput from '@/components/LimitInput';

const { Option } = Select;

// 终止入职表单
const AbortEntry = ({ form }) => {
    const { getFieldDecorator, setFieldsValue } = form;

    const [reasonOptions] = useDictionary('terminate_entry_reason');
    React.useEffect(() => {
        setFieldsValue({ reason: undefined });
    }, []);

    return (
        <Fragment>
            <Form.Item label="原因">
                {getFieldDecorator('reason', {
                    rules: [
                        {
                            required: true,
                            message: '请选择原因'
                        }
                    ]
                })(
                    <Select showSearch placeholder="请选择">
                        {reasonOptions?.map(item => {
                            const { dictValue, dictName } = item;
                            return (
                                <Option value={dictValue} key={dictValue}>
                                    {dictName}
                                </Option>
                            );
                        })}
                    </Select>
                )}
            </Form.Item>
            <Form.Item label="补充说明">
                {getFieldDecorator('remark', {
                    rules: [
                        {
                            min: 2,
                            max: 4000,
                            message: '请输入2~4000个字符'
                        }
                    ]
                })(<LimitInput area rows={4} placeholder="请输入" maxLength={4000} />)}
            </Form.Item>
        </Fragment>
    );
};

export default AbortEntry;
